<template>
  <view class="body">
    <!-- <view class="topLine" :style="{height: topBar+'px'}"></view> -->
    <view class="nav row_align_center" id="nav">
      <li style="color: #fff;z-index: 999;" :class="['iconfont icon-zuojiantou back']" @click="gotoBack()"></li>
    </view>
    <view class="top_head">
      <view class="text_des">
        <text class="month_num">{{nowTime.month}}</text>
        <text class="month_text">月</text>
        <text class="month_year">{{nowTime.year}}</text>
        <text class="point">.</text>
        <text class="title">财务报告</text>
      </view>
      <view class="top_desc">
        <view class="text-gray">结余</view>
        <view class="remaining">{{myWallet.remaining}}</view>
        <view class="row head_block">
          <view class="flex_1">
            <text class="text-gray">支出</text>
            <text class="text_green">{{myWallet.expend}}</text>
          </view>
          <view class="flex_1">
            <text class="text-gray">收入</text>
            <text class="income">{{myWallet.income}}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="row_block">
        <view class="the_title" style="justify-content: space-between;">
          <view class="left_title">
            <view class="title_icon"></view>
            <text class="margin_stand-samll font-big wide">历史趋势</text>
          </view>
          <view class="right_btn">
            <view v-for="(item,index) in historyBtn" :key="index" :class="item.state ? 'active_btn':''"
                  @click="changeHistoryBtn(item.type)">{{item.name}}</view>
          </view>
        </view>
        <view class="charts-box" style="height: 200px;">
          <qiun-data-charts type="line" canvasId="finance_a" :canvas2d="isCanvas2d" :resshow="delayload"
                            :opts="{xAxis:{itemCount:12,disableGrid:true},yAxis:{disableGrid:true,data:[{disabled:true}]}}"
                            :chartData="historyData" />
        </view>
      </view>
      <view class="row_block">
        <view class="the_title">
          <view class="title_icon"></view>
          <text class="margin_stand-samll font-big wide">钱都去哪了</text>
        </view>
        <view v-if="delayload" class="charts-box">
          <qiun-data-charts type="ring" canvasId="finance_b" :canvas2d="isCanvas2d" :resshow="delayload"
                            :opts="{padding:[15,0,4,0],legend:{position: 'bottom'},title:{name: expendCount},subtitle: {name: '支出',fontSize:'20'}}"
                            :chartData="expendDetail" />
        </view>
        <view class="the_title">
          <text class="margin_stand-samll font-middle wide">支出单笔最贵</text>
        </view>
        <view class="extend_rank">
          <view class="rank_item" v-for="(item,index) in extendRank" :key="index">
            <image :src="getImage(index)" mode="widthFix"></image>
            <text class="name">{{item.name}}</text>
            <text class="desc">{{item.desc}}</text>
            <text class="text_green money">{{item.money}}</text>
          </view>
        </view>
      </view>
      <view class="row_block">
        <view class="the_title">
          <view class="title_icon"></view>
          <text class="margin_stand-samll font-big wide">{{nowTime.month}}月明细</text>
        </view>
        <view class="detail_list">
          <view v-for="(item,index) in detail_list" :key="index" class="detail_item">
            <view>
              <view class="font-middle">{{item.date}}</view>
              <view class="font-small">{{item.time}}</view>
            </view>
            <view class="icon"><li :class="['iconfont',item.type == 'income'?'icon-income':'icon-expend']"></li></view>
            <view class="right_content">
              <view class="money">{{item.type == 'income'?'+':'-'}}{{item.money}}</view>
              <view class="text-gray font-middle">{{item.desc}}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="end_block">
        <view class="the_title" style="margin-bottom: 40rpx;">
          <view class="title_icon"></view>
          <text class="margin_stand-samll font-big wide">我的支出水平</text>
        </view>
        <view class="level_bar">
          <view v-for="(item,index) in extend_level_bar" :key="index" :style="{width:item.width}" :class="item.state ? 'text_green font-middle':''">{{item.name}}</view>
        </view>
        <view class="level_bar">
          <view v-for="(item,index) in extend_level_bar" :key="index" :style="{width:item.width}" :class="item.state ? 'active_bar':'default_bar'"></view>
        </view>
        <view class="level_bar">
          <view v-for="(item,index) in extend_level_bar" :key="index" :style="{width:item.width}" :class="item.state ? 'text_green font-middle':''">{{item.range}}</view>
        </view>
        <view class="extend_message">
          <li style="color: #ccc;" :class="['iconfont icon-message']"></li>
          <view>
            “ 我的支出水平已超过
            <text>{{extend_morethan}}</text>
            的乡镇居民。 ”
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ProgressBar from "@/components/progress-bar/progress-bar.vue"

import dataOne from '../../static/json/finance/1.json';
import expendDetail from '../../static/json/finance/2.json';
let _now = new Date();
let now_time = {};
now_time.year = _now.getFullYear()
now_time.month = _now.getMonth() + 1
now_time.day = _now.getDay()
export default {
  components: {
    ProgressBar
  },
  data() {
    return {
      scrollHeight: "600px", //数据展示体高度
      isCanvas2d: true,
      historyData: {},
      dataOne,
      expendDetail,
      expendCount:0,
      delayload: false,
      nowTime: {
        year: now_time.year,
        month: now_time.month,
        day: now_time.day
      },
      historyBtn: [{
        name: "支出",
        state: 1,
        type: "expend"
      },
        {
          name: "收入",
          state: 0,
          type: "income"
        },
        {
          name: "结余",
          state: 0,
          type: "remaining"
        },
      ],
      myWallet: {
        remaining: 3000.34,
        expend: 5240.32,
        income: 8240.66
      },
      extendRank: [{
        name: "腐败聚会",
        desc: now_time.month + "月6日12:34-跨界空间轰趴",
        money: "422.12"
      },
        {
          name: "沐浴按摩",
          desc: now_time.month + "月12日21:34-乔杉沐浴城",
          money: "318.00"
        },
        {
          name: "食品酒水",
          desc: now_time.month + "月1日21:34-school酒馆",
          money: "289.50"
        },
      ],
      extend_level_bar:[
        {name:"低消费",range:"<2000元",width:"20%"},
        {name:"中间消费",range:"2000-5000元",width:"35%"},
        {name:"较高消费",range:"5000-8000元",width:"25%",state:1},
        {name:"高消费",range:">8000元",width:"20%"},
      ],
      extend_morethan:"68%",
      detail_list:[
        {date:now_time.month + "-01",time:"11:01","type":"extend",money:"10.00",desc:"银行卡转出"},
        {date:now_time.month + "-01",time:"13:45","type":"income",money:"18.00",desc:"银行卡收入"},
        {date:now_time.month + "-02",time:"06:21","type":"extend",money:"123.45",desc:"信用卡转出"},
        {date:now_time.month + "-03",time:"07:38","type":"income",money:"23.00",desc:"银行卡收入"},
        {date:now_time.month + "-08",time:"16:28","type":"extend",money:"23.56",desc:"信用卡转出"},
        {date:now_time.month + "-09",time:"15:25","type":"income",money:"850.12",desc:"银行卡收入"},
        {date:now_time.month + "-09",time:"18:52","type":"income",money:"1.88",desc:"银行卡收入"},
        {date:now_time.month + "-11",time:"21:12","type":"extend",money:"220.21",desc:"银行卡转出"},
        {date:now_time.month + "-12",time:"13:08","type":"income",money:"32.28",desc:"银行卡收入"},
        {date:now_time.month + "-12",time:"12:41","type":"extend",money:"122.12",desc:"信用卡转出"},
        {date:now_time.month + "-13",time:"17:21","type":"income",money:"10.00",desc:"银行卡收入"},
      ]
    };
  },
  watch: {
    "historyBtn": {
      deep: true,
      handler: function(newVal, oldVal) {
        this.filterHistoryData();
      }
    }
  },
  methods: {
    async getData() {
      uni.showLoading();
      this.filterHistoryData();
      for (let i = 0; i < this.expendDetail.series.length; i++) {
        this.expendDetail.series[i].format = "pieDemo"
      }
      let length = this.expendDetail.series[0].data.length
      for (let i = 0; i < length; i++) {
        this.expendCount += this.expendDetail.series[0].data[i].value
      }
      await setTimeout(() => {
        this.delayload = true;
        uni.hideLoading();
      }, 1000)
    },
    changeHistoryBtn(type) {
      for (let i = 0; i < this.historyBtn.length; i++) {
        if (this.historyBtn[i].type == type) {
          this.historyBtn[i].state = 1
        } else {
          this.historyBtn[i].state = 0
        }
      }
    },
    filterHistoryData() {
      let type = this.historyBtn.filter(x => x.state == 1)[0].type;
      switch (type) {
        case "expend":
          this.historyData = this.dataOne.expend;
          break;
        case "income":
          this.historyData = this.dataOne.income;
          break;
        case "remaining":
          this.historyData = this.dataOne.remaining;
          break;
      }
    },
    gotoBack() {
      this.$Common.navigateBack("/index/index");
    },
    getImage(index) {
      switch (index) {
        case 0:
          return "https://s1.ax1x.com/2023/03/31/ppRYrfP.png";
          break;
        case 1:
          return "https://s1.ax1x.com/2023/03/31/ppRYySf.png";
          break;
        case 2:
          return "https://s1.ax1x.com/2023/03/31/ppRY6l8.png";
          break;
      }
    }
  },
  onReady() {
    //#ifndef H5
    uni.showShareMenu();
    //#endif
    this.getData()
  }
}
</script>

<style scoped lang="scss">
.body {
  height: 100%;
  background-color: #560594;
  margin: 0;
  padding-bottom: 20rpx;
  li{
    list-style-type: none;
  }

  .nav {
    position: fixed;
    top: 50rpx;
    left: 20rpx;
  }

  .text_green {
    color: #4ECDB6;
  }

  .main {
    width: 100%;
    padding: 0 10rpx;
    box-sizing: border-box;
    margin-top: 20rpx;

    .detail_list{
      height: 700rpx;
      overflow: auto;
      color: #9E9E9E;
      .detail_item{
        display: flex;
        margin: 20rpx 0;
        align-items: center;
        .icon{
          width: 30%;
          text-align: center;
          li{
            font-size: 80rpx;
          }
        }
        .right_content{
          width: 50%;
          text-align: center;
        }
        .icon-income{
          color:#4AABF9;
        }
        .icon-expend{
          color: #E45521;
        }
        .money{
          color: #000;
        }
      }
    }

    .extend_message{
      margin-top: 20rpx;
      color: #ccc;
      display: flex;
      text{
        color: #ff9900;
      }
    }

    .level_bar{
      width: 100%;
      height: 40rpx;
      border-radius: 40rpx;
      overflow: hidden;
      display: flex;
      color: #ccc;
      font-size: 20rpx;
      text-align: right;
      line-height: 40rpx;
      view{
        border-right: 2rpx solid #fff;
        position: relative;
      }
      .name{
        position: absolute;
        top: -30rpx;
        right: -40rpx;
      }
      .range{
        position: absolute;
        bottom: 30rpx;
        right: -40rpx;
      }
      .default_bar{
        background-color: #A0DFCD;
      }
      .active_bar{
        background-color: #02AE7A;
      }
    }
    .right_btn {
      float: right;
      display: flex;
      color: #ccc;
      font-size: 22rpx;

      view {
        line-height: 50rpx;
        height: 50rpx;
        margin: 0 20rpx;
      }

      .active_btn {
        padding: 0rpx 20rpx;
        border: 1px solid #ccc;
        border-radius: 40rpx;
      }
    }
    .end_block {
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 12rpx;
      position: relative;
      padding: 20rpx;
    }

    .row_block {
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 12rpx;
      position: relative;
      padding: 20rpx;

      &::after {
        content: "";
        height: 0px;
        width: 92%;
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        bottom: 0;
        border-top: 1px dashed #ccc;
      }
    }
    .the_title {
      display: flex;
      align-items: center;

      .left_title {
        display: flex;
        align-items: center;
      }

      .title_icon {
        background-color: #7E7E7E;
        height: 40rpx;
        width: 10rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
        font-size: 16px;
        font-weight: 600;
      }
    }

    .extend_rank {
      width: 100%;
      background-color: #F5F5F5;
      box-sizing: border-box;
      padding: 10rpx;

      .rank_item {
        width: 100%;
        margin: 20rpx 0;
        box-sizing: border-box;
        display: flex;
        font-size: 26rpx;
        justify-content: space-between;
        align-items: center;

        image {
          width: 10%;
        }

        text {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          display: block;
        }

        .name {
          margin: 0 10rpx;
          color: #7D7D7D;
          width: 20%;
        }

        .desc {
          width: 50%;
          color: #ccc;
        }

        .money {
          width: 20%;
          text-align: right;
        }
      }
    }
  }

  .top_head {
    height: 435rpx;
    width: 100%;
    padding: 110rpx 10rpx 0rpx 10rpx;
    background: url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e9420bcd-26cd-4faf-b47a-9949982f7c41/0edf7889-12cb-4151-94b7-a2c12d27108a.jpg") no-repeat center 0px;
    background-size: 100% 100%;
    box-sizing: border-box;

    .top_desc {
      width: 100%;
      border-radius: 20rpx;
      background-color: #fff;
      margin-top: 20rpx;
      padding: 20rpx;
      box-sizing: border-box;

      .text-gray {
        font-size: 28rpx;
        color: #ccc;
        margin-right: 10rpx;
      }

      .remaining {
        font-size: 46rpx;
      }

      .flex_1 {
        flex: 1;
      }

      .head_block {
        margin-top: 20rpx;

        .income {
          color: #E34B5E;
        }
      }
    }

    .text_des {
      height: 100rpx;
      color: #fff;
      font-weight: 900;
      position: relative;
      margin-left: 60rpx;

      text {
        display: inline-block;
        height: 100%;
      }

      .month_num {
        font-size: 90rpx;
      }

      .month_text {
        font-size: 56rpx;
      }

      .month_year {
        font-size: 22rpx;
        position: absolute;
        left: 60rpx;
        top: 20rpx;
      }

      .point {
        font-size: 40rpx;
      }

      .title {
        font-size: 40rpx;
      }
    }
  }
}
</style>
